<template>
  <div class="footer">
    <ul>
      <li>
        <router-link to="/home">
          <i ></i>
          <span>首页</span>
        </router-link>
      </li>
      <li  >
        <router-link to="/category">
          <i ></i>
          <span>分类</span>
        </router-link>
      </li>
      <li>
        <router-link to="/cart">
          <i></i>
          <span >购物车</span>
        </router-link>
      </li>
      <li>
        <router-link to="/profile">
          <i></i>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 自定义公共组件，一定要管好
export default{
  name:"MiNav",
	data(){
          return{

          }
	}
}
</script>

<style >
*{
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.footer{
  height: 14.5vw;
  flex-shrink: 0;
  background-color: white;

}
.footer ul{
  display: flex;
  justify-content: space-evenly;
margin-top: 10px;
}

.footer a{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: black;
}
.footer i{
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image:url("./nav_bg.png");
  background-position: 0px 0px;
  background-size: cover;
}

.footer li:nth-child(2) i{
  background-position: 0px -48px;
}
.footer li:nth-child(3) i{
  background-position: 0px -147px;
}
.footer li:nth-child(4) i{
  background-position: 0px -195px;
}
.footer li:nth-child(1) a.router-link-active i{  background-position: 0 -24px;  }
.footer li:nth-child(2) a.router-link-active i{  background-position: 0 -72px;  }
.footer li:nth-child(3) a.router-link-active i{  background-position: -2px -169px;  }
.footer li:nth-child(4) a.router-link-active i{  background-position: 0 -218px;  }

</style>
